<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>合计：{{count}}</h1>
        <hr>
        <box @changenum="getData"></box>
        <box @changenum="getData"></box>
        <box @changenum="getData"></box>
        <box @changenum="getData"></box>
    </div>
</body>
<!-- 
    子组件传父组件：
    1. 父组件中定义一个接收的方法
    2. 使用子组件的时候，监听自定义的事件
    3. 子组件在特定的时候触发自定义事件   this.$emit
-->
<template id="box">
    <div>
        <!-- 英文空格&nbsp; 中文空格&#X3000; -->
        <button @click="add">+</button>
        &nbsp;
        <span>{{num}}</span>
        &nbsp;
        <button @click="reduce">-</button>
    </div>
</template>
<script>
    const box={
        template:"#box",
        data(){
            return{
                num:0
            }
        },
        methods:{
            add(){
                this.num++
                this.$emit('changenum',1)
            },
            reduce(){
                this.num--
                this.$emit('changenum',-1)
            }
        }
    }
    const app = {
        data() {
            return {
                count: 0
            }
        },
        methods: {
            // 1.父组件定义一个接收方法
            getData(num){
                this.count+=num
                console.log('被触发了'+num);
                
            }
        },
        components:{
            box
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>